import {
  AppstoreOutlined,
  CalendarOutlined,
  MailOutlined,
} from '@ant-design/icons';
import { Divider, Menu } from 'antd';
import type { MenuProps, MenuTheme } from 'antd/es/menu';
import React, { useState } from 'react';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('系统介绍', '1', <MailOutlined />),
  getItem('功能说明', '2', <CalendarOutlined />),
  getItem('版本', '3', <AppstoreOutlined />)
];

export default () => {
  const [selectedKey, setSelectedKey] = useState<string>('1')
  
  return (
    <div style={{
      display: 'flex',
      height: '80vh',
      width: '100vw'
    }}>
      <Menu
        style={{ width: '300px', fontSize: '24px' }}
        defaultSelectedKeys={[selectedKey]}
        items={items}
        onClick={(e) => {
          setSelectedKey(e.key);
        }}
      />
      <div style={{ width: '100%', fontSize: '22px', padding: '20px' }}>
        {selectedKey === '1' && (
          <div style={{ width: '100%' }}>
            <h2>系统介绍</h2>
            <Divider></Divider>
            <div>
              该系统是采用深度学习相关算法帮助使用者进行CT图的骨折自动诊断
            </div>
          </div>
        )}
        {selectedKey === '2' && (
          <div style={{ width: '100%' }}>
            <h2>功能说明</h2>
            <Divider></Divider>
            <div>
            采用深度学习思想，将脊柱椎体骨折分型问题分解为构建数据集、脊柱椎体分割、脊柱椎体骨折分型三个环节，通过深度学习算法自动学习数据集中的专家知识，实现一致性良好的脊柱骨折快速分型
            </div>
          </div>
        )}
        {selectedKey === '3' && (
          <div style={{ width: '100%' }}>
            <h2>版本</h2>
            <Divider></Divider>
            <div>
              v1.0.0
            </div>
          </div>
        )}
      </div>
    </div>
  );
};